<template>
  <view class="related-content">
    <view class="top-block view-block">
      <uni-section title="实时信息" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>

      <view class="real-time">
        <uni-row>
          <uni-col :span="8" class="box">
            <image class="icon" src="/static/images/monitor/dmhj/wd.png" mode=""></image>
            <view class="right">
              <view class="lab">温度</view>
              <view class="val">{{ dataObj.tem || '--' }}℃</view>
            </view>
          </uni-col>
          <uni-col :span="8" class="box">
            <image class="icon" src="/static/images/monitor/dmhj/sd.png" mode=""></image>
            <view class="right">
              <view class="lab">湿度</view>
              <view class="val">{{ dataObj.hum || '--' }}%</view>
            </view>
          </uni-col>
          <uni-col :span="8" class="box">
            <image class="icon" src="/static/images/monitor/dmhj/fs.png" mode=""></image>
            <view class="right">
              <view class="lab">风速</view>
              <view class="val">{{ dataObj.ws || '--' }}</view>
            </view>
          </uni-col>
          <uni-col :span="8" class="box">
            <image class="icon" src="/static/images/monitor/dmhj/fl.png" mode=""></image>
            <view class="right">
              <view class="lab">风力</view>
              <view class="val">{{ dataObj.wp || '--' }}级</view>
            </view>
          </uni-col>
          <uni-col :span="8" class="box">
            <image class="icon" src="/static/images/monitor/dmhj/fl.png" mode=""></image>
            <view class="right">
              <view class="lab">风向</view>
              <view class="val">{{ switchWd }}</view>
            </view>
          </uni-col>
          <uni-col :span="8" class="box">
            <image class="icon" src="/static/images/monitor/dmhj/fl.png" mode=""></image>
            <view class="right">
              <view class="lab">PM2.5</view>
              <view class="val">{{ dataObj.pm25 || '--' }}ug/m3</view>
            </view>
          </uni-col>
          <uni-col :span="8" class="box">
            <image class="icon" src="/static/images/monitor/dmhj/fl.png" mode=""></image>
            <view class="right">
              <view class="lab">PM10</view>
              <view class="val">{{ dataObj.pm10 || '--' }}μg/m³</view>
            </view>
          </uni-col>
          <uni-col :span="8" class="box">
            <image class="icon" src="/static/images/monitor/dmhj/fl.png" mode=""></image>
            <view class="right">
              <view class="lab">大气压</view>
              <view class="val">{{ dataObj.atm || '--' }}kPa</view>
            </view>
          </uni-col>
          <uni-col :span="8" class="box">
            <image class="icon" src="/static/images/monitor/dmhj/fl.png" mode=""></image>
            <view class="right">
              <view class="lab">分贝</view>
              <view class="val">{{ dataObj.noise || '--' }}dB</view>
            </view>
          </uni-col>
        </uni-row>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="温度" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="chart-box">
        <line-chart chart-ref="chartRefWd" :chart-data="chartDataWd"></line-chart>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="湿度" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="chart-box">
        <line-chart chart-ref="chartRefSd" :chart-data="chartDataSd"></line-chart>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="分贝" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="chart-box">
        <line-chart chart-ref="chartRefFb" :chart-data="chartDataFb"></line-chart>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="大气压" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="chart-box">
        <line-chart chart-ref="chartRefDqy" :chart-data="chartDataDqy"></line-chart>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="PM2.5" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="chart-box">
        <line-chart chart-ref="chartRefPm25" :chart-data="chartDataPm25"></line-chart>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="PM10" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="chart-box">
        <line-chart chart-ref="chartRefPm10" :chart-data="chartDataPm10"></line-chart>
      </view>
    </view>
  </view>
</template>

<script>
import { getEnvironmentalMonitoring } from '@/api/home.js';
import { getEnvironmentTem, environmentNoise, environmentPm25, environmentPm10,environmentHum, environmentAtm } from '@/api/monitorCenter/index.js';
export default {
  data() {
    return {
      chartDataWd: {
        legendData: ['温度'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            line: 'rgba(46, 125, 255, 1)',
            area0: 'rgba(46, 125, 255, 0.5)',
            area1: 'rgba(46, 125, 255, 0)'
          }
        ]
      },
      chartDataSd: {
        legendData: ['湿度'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            line: 'rgba(4, 197, 76, 1)',
            area0: 'rgba(4, 197, 76, 0.5)',
            area1: 'rgba(4, 197, 76, 0)'
          }
        ]
      },
      chartDataFb: {
        legendData: ['分贝'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            line: 'rgba(252, 155, 57, 1)',
            area0: 'rgba(252, 155, 57, 0.5)',
            area1: 'rgba(252, 155, 57, 0)'
          }
        ]
      },
      chartDataDqy: {
        legendData: ['大气压'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            line: 'rgba(159, 77, 252, 1)',
            area0: 'rgba(159, 77, 252, 0.5)',
            area1: 'rgba(159, 77, 252, 0)'
          }
        ]
      },
      chartDataPm25: {
        legendData: ['浓度'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            line: 'rgba(46, 125, 255, 1)',
            area0: 'rgba(46, 125, 255, 0.5)',
            area1: 'rgba(46, 125, 255, 0)'
          }
        ]
      },
      chartDataPm10: {
        legendData: ['浓度'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            line: 'rgba(4, 197, 76, 1)',
            area0: 'rgba(4, 197, 76, 0.5)',
            area1: 'rgba(4, 197, 76, 0)'
          }
        ]
      },
      dataObj: {}
    };
  },
  computed: {
    switchWd() {
      if (this.dataObj.wd8) {
        return this.dataObj.wd8 == 1
          ? '‌北'
          : this.dataObj.wd8 == 2
          ? '‌东北'
          : this.dataObj.wd8 == 3
          ? '‌东'
          : this.dataObj.wd8 == 4
          ? '‌东南'
          : this.dataObj.wd8 == 5
          ? '‌南'
          : this.dataObj.wd8 == 6
          ? '‌西南'
          : this.dataObj.wd8 == 7
          ? '‌西'
          : this.dataObj.wd8 == 8
          ? '‌西北'
          : this.dataObj.wd8;
      } else {
        return '--';
      }
    }
  },
  created() {
    this.getEnvironment();
    this.getTem();
    this.getHum()
    this.getNoise();
    this.getAtm();
    this.getPm25();
    this.getPm10();
  },
  mounted() {},
  methods: {
    getEnvironment() {
      getEnvironmentalMonitoring().then((res) => {
        this.dataObj = res.data || {};
      });
    },
    getTem() {
      getEnvironmentTem().then((res) => {
        let tempX = [],
          tempY = [];
        res.data.forEach((item) => {
          if (item.name) {
            tempX.push(item.name.substring(11, 16));
            tempY.push(item.value);
          }
        });
        this.chartDataWd.dataX = tempX;
        this.chartDataWd.dataY = [tempY];
      });
    },
    getHum(){
      environmentHum().then(res=>{
        let tempX = [],
          tempY = [];
        res.data.forEach((item) => {
          if (item.name) {
            tempX.push(item.name.substring(11, 16));
            tempY.push(item.value);
          }
        });
        this.chartDataSd.dataX = tempX;
        this.chartDataSd.dataY = [tempY];
      })
    },
    getAtm(){
      environmentAtm().then(res=>{
        let tempX = [],
          tempY = [];
        res.data.forEach((item) => {
          if (item.name) {
            tempX.push(item.name.substring(11, 16));
            tempY.push(item.value);
          }
        });
        this.chartDataDqy.dataX = tempX;
        this.chartDataDqy.dataY = [tempY];
      })
    },
    getNoise() {
      environmentNoise().then((res) => {
        let tempX = [],
          tempY = [];
        res.data.forEach((item) => {
          if (item.name) {
            tempX.push(item.name.substring(11, 16));
            tempY.push(item.value);
          }
        });
        this.chartDataFb.dataX = tempX;
        this.chartDataFb.dataY = [tempY];
      });
    },
    getPm25() {
      environmentPm25().then((res) => {
        let tempX = [],
          tempY = [];
        res.data.forEach((item) => {
          if (item.name) {
            tempX.push(item.name.substring(11, 16));
            tempY.push(item.value);
          }
        });
        this.chartDataPm25.dataX = tempX;
        this.chartDataPm25.dataY = [tempY];
      });
    },
    getPm10() {
      environmentPm10().then((res) => {
        let tempX = [],
          tempY = [];
        res.data.forEach((item) => {
          if (item.name) {
            tempX.push(item.name.substring(11, 16));
            tempY.push(item.value);
          }
        });
        this.chartDataPm10.dataX = tempX;
        this.chartDataPm10.dataY = [tempY];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.related-content {
  overflow-y: auto;
  
  .top-block {
    // box-shadow: 0rpx -15rpx 21rpx -5rpx rgba(0, 0, 0, 0.25);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }

  .view-block {
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 40rpx;
  }

  .chart-box {
    width: 100%;
    height: 487rpx;
  }

  .real-time {
    .box {
      display: flex;
      justify-content: center;
      padding: 30rpx 0;
      .icon {
        width: 48rpx;
        height: 48rpx;
      }
      .right {
        width: 120rpx;
        padding-left: 8rpx;
        .lab {
          font-weight: 500;
          font-size: 20rpx;
          color: rgba(16, 44, 89, 0.5);
          line-height: 14rpx;
        }
        .val {
          font-family: 快看世界体, 快看世界体;
          font-size: 24rpx;
          color: #102c59;
          line-height: 14rpx;
          padding-top: 18rpx;
        }
      }
    }
  }
}

::v-deep .uni-section .uni-section-header {
  padding: 0;
}
</style>
